Day25 六角 RWD #1

簡單小語

一開始看到覺得應該不難，結果RWD直接卡住不知道Table該怎麼排，後來發現參考樣板的方式，利用dataset的方式動態新增資料，然後在RWD時隱藏thead用偽元素呈現dataset樣式，又學了一招，頗有收穫，果然越簡單的樣式隱藏著更多的玄機，後續排版發現空間不足導致內容無法對齊，這時候就靠定位來排版，每次的練習都思考不一樣的做法及樣式，如同先前小語，練習就是要今天比昨天更進步才是，RWD持續學習努力成長。

筆記分享

1. data-th新增在td中，為的就是在小尺寸顯示可以正常排版。
2. 重新練習table, thead, tbody, tfoot, tr, th, td，排版及邊框重疊使用collapse處理問題。
3. 用了許多選擇器:first-child, :last-child, :nth-child，練習選取到想要的th, td。
4. 用了好久不見的animation，還忘記一些參數的使用，linear, infinite, alternate。
5. keyframes name {0%-100%}，漸進式的動作使用，自己可以切多個節點。
6. 一開始有設定th, td的寬度導致版面超寬，後來才改用自適應方式，才讓版面正常些。
7. JQuery從.click(function(){})改用.on(‘click’,function(){})，on可以支援全部JS事件，on可以同時增添兩個事件(‘click mouseover’)。
8. 小尺寸的圓角因為CSS優先權關係，因此在.table中做圓角，讓tr:nth-child背景變透明。
9. 背景的linear-gradient用上癮，有了配色網站都甭擔心。
10. JQuery往後起手式改寫scope, IIFES立即函式，保護程式碼，避免濫用。

(function () {
$(document).ready(function () {
   $('.btn').on('click',function () {
   $('.icon').toggleClass('active');
   $('table th').toggleClass('active');
   });
 });
})()

刻意練習

Practice(200818 Day 25)

樣板來源

Responsive Table

2020 iT邦幫忙鐵人賽 Day25 網頁前端-刻意練習(RWD#1)